<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Traits\Props\HasCollapsed;

/**
 * Grid组件
 * @method static Grid make(int|string $cols = 24, int|string $xGap = 0, int|string $yGap = 1, mixed $children = null) Grid组件
 */
class Grid extends Naive
{

    use HasCollapsed;

    /**
     * @param int|string $cols
     * @param int|string $xGap
     * @param int|string $yGap
     * @param mixed|null $children
     */
    public function __construct(int|string $cols = 24, int|string $xGap = 0, int|string $yGap = 1, mixed $children = null)
    {
        parent::__construct();
        $this->responsive('screen');
        $this->cols($cols)->children($children);
        $xGap!=0 && $this->xGap($xGap);
        $yGap!=1 && $this->yGap($yGap);
    }


    /**
     * 显示的栅格数量
     * @param int|string $cols
     * @return $this
     */
    public function cols(int|string $cols = 24): static
    {
        return $this->prop('cols', $cols);
    }

    /**
     * 默认展示的行数
     * @param int $rows
     * @return $this
     */
    public function collapsedRows(int $rows = 1): static
    {
        return $this->prop('collapsed-rows', $rows);
    }

    /**
     * 默认情况下，n-grid 会基于窗口宽度和容器宽度计算栅格内容，
     * 这会有两个副作用：
     * 在进行 SSR 的时候可能会出现内容闪烁；渲染时会出现 Layout Shift，这会略微影响渲染性能。
     * 但是如果你不需要响应式功能，你可以通过 layout-shift-disabled 规避删格的副作用。
     * 需要注意的是，打开这个选项会禁用 n-grid 的一切响应式功能和 n-grid-item 的 suffix、offset
     * @param bool $bool
     * @return $this
     */
    public function layoutShiftDisabled(bool $bool = true): static
    {
        return $this->prop('layout-shift-disabled', $bool);
    }

    /**
     * 'self' 根据自身宽度进行响应式布局，'screen' 根据屏幕断点进行响应式布局
     * @param string $responsive
     * @return $this
     */
    public function responsive(string $responsive = 'self' | 'screen'): static
    {
        return $this->prop('responsive', $responsive);
    }

    /**
     * 子元素是否可具有响应式宽度
     * @param bool $bool
     * @return $this
     */
    public function itemResponsive(bool $bool = true): static
    {
        return $this->prop('item-responsive', $bool);
    }

    /**
     * 横向间隔槽
     * @param int|string $number
     * @return $this
     */
    public function xGap(int|string $number = 0): static
    {
        return $this->prop('x-gap', $number);
    }

    /**
     * 纵向间隔槽
     * @param int|string $number
     * @return $this
     */
    public function yGap(int|string $number = 0): static
    {
        return $this->prop('y-gap', $number);
    }


    /**
     * 设置GridItem
     * @param mixed|null $children
     * @param int|null $span
     * @param int|null $offset
     * @return GridItem
     */
    public function item(mixed $children = null, int $span = null, int $offset = null): GridItem
    {
        $item = new GridItem($children, $span, $offset);
        $this->children($item);
        return $item;
    }
}
